{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
    <script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <title>设备</title>
</head>
<body>
<div class="row" style="padding-top: 20px">
    <div class="col-md-12">
        <div>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>设备名</th>
                    <th>cpu类型</th>
                    <th>内存</th>
                    <th>高低端</th>
                    <th>版本</th>
                    <th>热门</th>
                    <th>借用状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for device in devices %}
                    <tr>
                        <td>{{ device.device_name }}</td>
                        <td>{{ device.cpu_type }}</td>
                        <td>{{ device.mem_num }}</td>
                        <td>{{ device.level }}</td>
                        <td>{{ device.version }}</td>
                        <td>{% if device.hot == False %}
                            <label>是</label>
                        {% else %}
                            <label>否</label>
                        {% endif %}
                        </td>
                        <td>{% if device.state == False %}
                            <label style="color: green">可外借</label>
                        {% else %}
                            <label style="color: darkgrey">已外借</label>
                        {% endif %}
                        </td>
                        <td>{% if device.borrow == False %}
                            <button class="btn btn-primary btn-xs" role="button" style="font-size:12px">预定</button>
                        {% else %}
                            <button class="btn btn-danger" role="button" style="font-size:12px">不可预定</button>
                        {% endif %}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div  class="pagination">
        <span class="step-links">

                {% if pages.has_previous %}
                    <a class="active" href="?pages={{ pages.previous_page_number }}">上一页</a>
                {% endif %}
                <span class="current">
                    当前页：{{ pages.number }}/{{ pages.paginator.num_pages }}</span>
                {% if pages.has_next %}
                    <a class="active" href="?pages={{ pages.next_page_number }}">下一页</a>
                {% endif %}
        </span>
        </div>
    </div>
</div>
</body>
</html>